<template>
  <div class="dataScreen-container">
    <div ref="dataScreenRef" class="dataScreen">
      <div class="dataScreen-header">
        <div class="header-ct">
          <div class="header-ct-title">
            <span>松滋市人社大数据驾驶舱</span>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="left">
          <LeftView></LeftView>
        </div>
        <div class="center">
           <CenterView></CenterView>
        </div>
        <div class="right">
          <RightView></RightView>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>
<script lang="ts" setup name="dataScreen">
import { onMounted, ref, onBeforeUnmount } from "vue";
import RightView from "./components/rightView.vue";
import CenterView from "./components/centerView.vue";
import LeftView from "./components/leftView.vue";
// import MiddleView from "./components/MiddleView.vue";
// import LeftView from "./components/leftView.vue";

const dataScreenRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  // // 初始化 echarts
  // initCharts();
  // 为浏览器绑定事件
  window.addEventListener("resize", resize);
});

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 获取当前时间

// 销毁时触发
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style lang="scss" scoped>
@import "./index.scss";

:deep(.el-card) {
  background-color: rgba(255, 255, 255, 0);
  color: #05e8fe;
  // --el-card-border-color: #05e8fe;
  --el-card-border-color: none;
}
:deep(.el-menu) {
  // background-color: rgba(255, 255, 255, 0);
  // color: red;
  font-family: YouSheBiaoTiHei;
}
// :deep(.el-menu--horizontal > .el-menu-item) {
//   color: red;
// }
// :deep(.el-menu-item:not(.is-disabled):hover) {
//   background-color: blue;
// }
:deep(span.el-radio-button__inner) {
  background-color: rgba(255, 255, 255, 0);
  color: white;
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: #05e8fe;
  background-color: rgba(255, 255, 255, 0);
}
:deep(.el-date-editor) {
  background-color: rgba(255, 255, 255, 0);
  color: red;
}

:deep(input.el-range-input) {
  // background-color: rgba(255, 255, 255, 0.1);

  color: red !important;
}
</style>
